<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="price" :options="option1" title="综合" disabled/>
      <van-dropdown-item v-model="price" :options="option1" title="价格" @change="changePrice" />
      <van-dropdown-item v-model="classify" :options="filterCategory" title="分类" @change="changeCategory" />
    </van-dropdown-menu>


    <van-empty v-if="productsListData.length==0" image="search" description="对不起，未搜索到该产品" />
    <Products v-else :productsListData="productsListData" />
  </div>
</template>

<script>
import Products from '../Products';
export default {
  props:['productsListData', 'filterCategory'],
  components: {
    Products
  },
  beforeUpdate() {
    console.log('SearchProductList --- ',this.filterCategory);
    this.filterCategory.map(item => {
      item.checked ? this.classify = item.value : '';
    })
  },
  data() {
    return {
      price: '',
      classify: 0,
      option1: [
        { text: "价格由高到低", value: 'desc' },
        { text: "价格由低到高", value: 'asc' },
      ],
      // option2: [
      //   { text: "默认排序", value: 0 },
      //   { text: "好评排序", value: 1 },
      //   { text: "销量排序", value: 2 },
      // ],
    };
  },
  methods: {
    changeCategory(val) {
      console.log('changeCategory', val);
      this.$emit('categoryChan',val);
    },
    changePrice(val) {
      console.log('changePrice', val);
      this.$emit('priceChan', val);
    }
  }
};
</script>
 
<style lang = "less" scoped>
</style>